<template>
    <div class="index-article-body">
        <div v-if="loading"><span class="glyphicon glyphicon-refresh"></span>loading...</div>
        <transition name="articles">
            <div v-if="!loading">
                <template  v-for="art in articles">
                    <div class="index-article"><a :href="'/#/article/'+art.id" class="article-title"><h2><span
                            v-if="art.istop == 1"
                            class="top">[置顶]</span>{{art.title}}</h2>
                        <p class="abstract">{{art.abstracts}} ......</p>
                        <p class="abstract">作者: {{art.author}} 发表于：{{art.created_at}} 浏览量：{{art.visit}}
            </p>
                    </a></div>
                </template>
            </div>
        </transition>
        <nav aria-label="Page navigation">
            <ul class="pagination">
            </ul>
        </nav>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                articles: null,
                loading: false
            }
        },
        created(){
            this.loading = true;
            this.setPage();
        },
        methods: {
            getArt(){
                var vm = this;
                $.get("api/getArts?page=" + sPage.getnow(), function (json) {
                    vm.loading = false;
                    vm.articles = $.parseJSON(json).data;
                })
            },
            setPage() {
                var vm = this;
                $.get("/api/getArts?page=1", function (json) {
                    var data = $.parseJSON(json);
                    var total = data.last_page;
                    sPage({
                        dom: $(".pagination"),
                        now: 1,
                        total: total
                    });
                    sPage.gen();
                    sPage.bind(vm.getArt);
                    vm.getArt();
                });
            }
        }
    }
</script>

<style scoped>
    .articles-enter-active {
        transition: all .5s;
    }

    .articles-enter {
        opacity: 0;
        transform: translateY(10px);
    }
</style>